<template>
  <div>
    <div class="head">
      <headCommod/>
    </div>
    <div class="main main-top">
      <div class="container cl">
        <el-form class="wj-form" ref="form" :model="form" label-width="100px">
          <div class="fcl-top-box to-left">
            FCL > <span class="fcl-top-box-span" v-if="form.transportStatus">
            运输方式：{{ getShipType(form.transportStatus) }}
            <i @click="form.transportStatus = ''" class="el-icon-close"></i>
          </span>
            <span class="fcl-top-box-span" v-if="form.bussinessList.length > 0">
              业务类型：{{ getBusType(form.bussinessList) }}
              <i @click="form.bussinessList = []" class="el-icon-close"></i>
            </span>
          </div>
          <div class="fcl-box to-right">
            <el-form-item label="运输方式">
              <el-radio-group v-model="form.transportStatus" size="small">
                <el-radio v-for="(item,index) in transportlist" :label="item.value">{{item.label}}</el-radio>
                <!--                  <el-radio-button label="right">铁运</el-radio-button>-->
                <!--                  <el-radio-button label="top">陆运</el-radio-button>-->
              </el-radio-group>
            </el-form-item>
            <!--              FCL 0订舱 1拖车 2报关 3清关 4派送到门-->
            <el-form-item label="业务类型">
              <el-checkbox-group v-model="form.bussinessList" @change="getCheck">
                <el-checkbox label="0">订舱</el-checkbox>
                <el-checkbox label="1">拖车</el-checkbox>
                <el-checkbox label="2">报关</el-checkbox>
                <el-checkbox label="3">清关</el-checkbox>
                <el-checkbox label="4">派送到门</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="派送方式" v-if="paisongVisible">
              <el-radio-group v-model="form.deliveryType" size="small">
                <el-radio label="0">整柜</el-radio>
                <el-radio label="1">打托派送</el-radio>
                <el-radio label="2">快递派送</el-radio>
                <el-radio label="3">快递派送</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="fcl-box to-left">
            <h3>发货方信息</h3>
            <el-form-item label="发货方">
              <el-button  @click="addShipper" type="success" plain size="small">新增</el-button>
              <el-select v-model="form.shipperId" placeholder="请选择" filterable clearable>

                <el-option v-for="(item,index) in shipperList" :key="index" :value="item.value"
                           :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <!--              新增发货人弹框 只需要国家 州 市 公司名-->
            <el-dialog title="新增发货方" :visible.sync="shipperVisible" center width="30%"
                       :close-on-click-modal="false">
              <el-form :model="shipper" :rules="shipperRules" ref="shipper">
                <el-form-item label="公司名称" prop="name" :label-width="formLabelWidth">
                  <el-input v-model="shipper.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contact" :label-width="formLabelWidth" >
                  <el-input v-model="shipper.contact" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="tel" :label-width="formLabelWidth" >
                  <el-input v-model="shipper.tel" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                  <el-input v-model="shipper.email" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="国家" prop="country" :label-width="formLabelWidth">
                  <el-select v-model="shipper.country" placeholder="请选择" filterable clearable @change="initStateList">
                    <el-option v-for="(item,index) in countrylist" :key="index" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="州/省" prop="state" :label-width="formLabelWidth">
                  <el-select v-model="shipper.state" placeholder="请选择" filterable clearable @change="initCityList">
                    <el-option v-for="item in statelist" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                  <el-select v-model="shipper.city" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in citylist" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
                  <el-input v-model="shipper.address" type="textarea" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="shipperVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveShipper" :disabled="shipperBtnDisable">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <div class="fcl-box to-right">
            <h3>收货方信息</h3>
            <el-form-item label="收货方">
              <el-button  @click="addReceiver" type="success" plain size="small">新增</el-button>
              <el-select v-model="form.recId" placeholder="请选择">
                <el-option v-for="(item,index) in receiverlist" :key="index" :value="item.value"
                           :label="item.label"></el-option>
              </el-select>
            </el-form-item>

            <el-dialog title="新增收货方" :visible.sync="receiverVisible"  center width="30%" :close-on-click-modal="false">
              <el-form :model="receiver" :rules="receiverRules" ref="receiver">
                <el-form-item label="公司名称" prop="name" :label-width="formLabelWidth" >
                  <el-input v-model="receiver.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contact" :label-width="formLabelWidth" >
                  <el-input v-model="receiver.contact" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="tel" :label-width="formLabelWidth" >
                  <el-input v-model="receiver.tel" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                  <el-input v-model="receiver.email" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="国家" prop="country" :label-width="formLabelWidth">
                  <el-select v-model="receiver.country" placeholder="请选择" filterable clearable @change="initStateList">
                    <el-option v-for="(item,index) in countrylist" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="州/省" prop="state" :label-width="formLabelWidth" >
                  <el-select v-model="receiver.state" placeholder="请选择" filterable clearable @change="initCityList">
                    <el-option v-for="item in statelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                  <el-select v-model="receiver.city" placeholder="请选择" filterable clearable >
                    <el-option v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
                  <el-input v-model="receiver.address"  type="textarea" autocomplete="off"></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="receiverVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveReceiver" :disabled="receiverDisabled">确 定</el-button>
              </div>

            </el-dialog>
          </div>
          <div class="fcl-box to-left">
            <h3>通知方信息</h3>
            <el-form-item label="通知方">
              <el-button size="small" type="success" plain @click="addNotify">新增</el-button>
              <el-select v-model="form.notifyPart" placeholder="请选择" filterable clearable>
                <el-option v-for="(item,index) in notifylist" :value="item.value" :label="item.label" ></el-option>
              </el-select>
            </el-form-item>
            <el-dialog title="新增通知方" :visible.sync="notifyVisible"  center width="30%" :close-on-click-modal="false">
              <el-form :model="notify" :rules="notifyRules" ref="notify">
                <el-form-item label="名字" prop="name" :label-width="formLabelWidth" >
                  <el-input v-model="notify.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="tel" :label-width="formLabelWidth" >
                  <el-input v-model="notify.tel" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                  <el-input v-model="notify.email" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="国家" prop="country" :label-width="formLabelWidth">
                  <el-select v-model="notify.country" placeholder="请选择" filterable clearable @change="initStateList">
                    <el-option v-for="(item,index) in countrylist" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="州/省" prop="state" :label-width="formLabelWidth" >
                  <el-select v-model="notify.state" placeholder="请选择" filterable clearable @change="initCityList">
                    <el-option v-for="item in statelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="城市" prop="city" :label-width="formLabelWidth">
                  <el-select v-model="notify.city" placeholder="请选择" filterable clearable >
                    <el-option v-for="item in citylist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address" :label-width="formLabelWidth">
                  <el-input v-model="notify.address"  type="textarea" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="notifyVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNotify" :disabled="notifyDisable">确 定</el-button>
              </div>
            </el-dialog>
          </div>

          <div class="fcl-box to-right">
            <h3>进口商信息</h3>

            <el-form-item label="进口商">
              <el-button  @click="addImporter" type="success" size="small" plain>新增</el-button>
              <el-select v-model="form.importerId" placeholder="请选择" clearable filterable>
                <el-option v-for="(item,index) in importerlist" :value="item.value" :label="item.label" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-dialog title="新增进口商" :visible.sync="importerVisible" width="30%" center :close-on-click-modal="false">

              <el-form :model="importer" :rules="importerRules" ref="importer">
                <el-form-item label="进口商名称" prop="name" :label-width="formLabelWidth" >
                  <el-input v-model="importer.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="国家" prop="country" :label-width="formLabelWidth">
                  <el-select v-model="importer.country" placeholder="获取国家基础数据" filterable clearable >
                    <el-option v-for="(item,index) in countrylist" :key="index" :label="item.label" :value="item.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="税号" prop="tax" :label-width="formLabelWidth" >
                  <el-input v-model="importer.tax" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="VAT" prop="vat" :label-width="formLabelWidth">
                  <el-input v-model="importer.vat" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="联系人" prop="contact" :label-width="formLabelWidth">
                  <el-input v-model="importer.contact" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="tel" :label-width="formLabelWidth">
                  <el-input v-model="importer.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address" :label-width="formLabelWidth">
                  <el-input v-model="importer.address" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="有效开始时间" prop="stime" :label-width="formLabelWidth">

                  <el-date-picker
                    class="f-flex-1"
                    v-model="importer.stime"
                    type="datetime"
                    size="small"
                    placeholder="开始时间"
                    default-time="00:00:00"
                    :picker-options="editStartOptions"
                    value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="有效结束时间" prop="etime" :label-width="formLabelWidth">

                  <el-date-picker
                    class="f-flex-1"
                    v-model="importer.etime"
                    type="datetime"
                    size="small"
                    placeholder="结束时间"
                    default-time="23:59:59"
                    :picker-options="editStopOptions"
                    value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>

                </el-form-item>
                <el-form-item label="购买来源" prop="source" :label-width="formLabelWidth">
                  <el-select v-model="importer.source" placeholder="请选择" filterable clearable >
                    <el-option v-for="item in sourcelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="性质" prop="nature" :label-width="formLabelWidth">
                  <el-select v-model="importer.nature" placeholder="请选择" filterable clearable >
                    <el-option v-for="item in naturelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="importerVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveImporter" :disabled="importerDisable">确 定</el-button>
              </div>

            </el-dialog>
            <el-form-item label="授权书">
              <el-upload
                class="upload-demo"
                action=""
                :before-upload="beforeUpload"
                :http-request="handleUpload"
                multiple
                :file-list="fileList"
                :show-file-list="false"
                >
                <el-button size="small" type="success" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>
          </div>

          <div class="fcl-box to-left">
            <h3>订单信息</h3>
            <el-form-item label="是否购买保险">
              <el-select v-model="form.insurance" placeholder="请选择">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="投保金额" v-if="form.insurance === '1'">
              <el-input v-model="form.insuranceFee"></el-input>
            </el-form-item>
            <el-form-item label="保险币种" v-if="form.insurance === '1'">
              <el-select v-model="form.insuranceCur" placeholder="请选择" filterable clearable>
                <el-option :label="item.label" :value="item.label" v-for="(item,index) in curlist"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="被保人" v-if="form.insurance === '1'">
              <el-button type="success" size="small" @click="addInsurance">新增</el-button>
              <el-select v-model="form.insured" placeholder="请选择" clearable filterable>
                <el-option :label="item.label" :value="item.value" v-for="(item,index) in insurancelist"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item label="客户内部订单">
              <el-input v-model="form.withinOrderRemark"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>

            <el-dialog title="新增被保人" :visible.sync="insuranceVisible"  center width="30%" :close-on-click-modal="false">

              <el-form :model="insurance" :rules="insuranceRules" ref="insurance">


                <el-form-item label="被保人" prop="name" :label-width="formLabelWidth" >
                  <el-input v-model="insurance.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="type" label="类型" :label-width="formLabelWidth">
                  <el-radio-group v-model="insurance.type">
                    <el-radio :label='"0"'>公司</el-radio>
                    <el-radio :label='"1"'>个人</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号/税号" prop="cardNo" :label-width="formLabelWidth" :rules="form.type=='1'?rules.cardNo:[]">
                  <el-input v-model="insurance.cardNo" autocomplete="off" ></el-input>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="insuranceVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveInsurance" :disabled="insuranceBtnDisable">确 定</el-button>
              </div>

            </el-dialog>

          </div>

          <div class="fcl-box to-right">
<!--              `declare_type` enum('0','1','2','3') DEFAULT NULL COMMENT '报关：0买单 1退税 2买单并退税 3自拖自报',-->
            <h3>报关信息</h3>
            <el-form-item label="报关类型">
              <el-select v-model="form.declareType" placeholder="请选择">
                <el-option label="买单" value="0"></el-option>
                <el-option label="退税" value="1"></el-option>
                <el-option label="买单并退税" value="2"></el-option>
                <el-option label="自拖自报" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="退税份数">
              <el-input/>
            </el-form-item>
            <el-form-item label="报关文件上传">
              <el-upload
                v-if="form.declareType ==='0' || form.declareType === '2'"
                class="upload-demo"
                action=""
                :http-request="uploadMd"
                :before-upload="beforeUpload"
                :show-file-list="false"
                style="float: left;margin-right: 20px;">
                <el-button size="small" type="primary">买单上传</el-button>
              </el-upload>
              <el-upload
                v-if="form.declareType ==='1' || form.declareType === '2'"
                class="upload-demo"
                action=""
                :http-request="uploadTs"
                :show-file-list="false"
                :before-upload="beforeUpload"
                style="float: left;margin-right: 20px;">
                <el-button size="small" type="primary">退税上传</el-button>
              </el-upload>
              <a href="" @click.prevent="maidan">买单报关模板下载</a>
              <a href="" @click.prevent="tuishui">退税报关模板下载</a>
            </el-form-item>
          </div>

          <div class="fcl-box to-left">
            <h3>拖车信息</h3>
            <el-form-item label="装柜时间">
              <el-date-picker
                v-model="form.stime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="装柜地址">
              <el-col :span="21">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-button type="success" plain>添加装柜地址</el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="订舱号">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="截关时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="件数">
              <el-input/>
            </el-form-item>
            <el-form-item label="重量(KG)">
              <el-input/>
            </el-form-item>
            <el-form-item label="体积">
              <el-input/>
            </el-form-item>
          </div>

          <div class="fcl-box to-right">
            <h3>派送信息</h3>
            <el-form-item label="地址类型">
              <el-radio-group v-model="form.resource">
                <el-radio label="FBA地址"></el-radio>
                <el-radio label="海外仓"></el-radio>
                <el-radio label="商业地址"></el-radio>
                <el-radio label="私人住宅地址"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有缺货平台">
              <el-radio-group v-model="form.resource">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
            <br/>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="date"
                label="Shipment ID"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="Reference ID"
                width="180">
              </el-table-column>
              <el-table-column
                prop="件数（CTN）"
                label="件数（CTN）">
              </el-table-column>
              <el-table-column
                prop="重量（KG）"
                label="重量（KG）">
              </el-table-column>
              <el-table-column
                prop="体积（CBM）"
                label="体积（CBM）">
              </el-table-column>
              <el-table-column
                prop="FBA标签"
                label="FBA标签">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="地址信息">
              </el-table-column>
              <el-table-column
                prop="FBA标签"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small">上传标签</el-button>
                  <el-button type="text" size="small">派送地址</el-button>
                  <el-button type="text" size="small">删除</el-button>
                  <el-button type="text" size="small">添加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <br/><br/>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="date"
                label="唛头"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="件数（CTN）"
                width="180">
              </el-table-column>
              <el-table-column
                prop="件数（CTN）"
                label="重量（KG）">
              </el-table-column>
              <el-table-column
                prop="重量（KG）"
                label="地址信息">
              </el-table-column>
              <el-table-column
                prop="重量（KG）"
                label="预约信息">
              </el-table-column>
              <el-table-column
                prop="FBA标签"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small">派送地址</el-button>
                  <el-button type="text" size="small">删除</el-button>
                  <el-button type="text" size="small">添加</el-button>
                </template>
              </el-table-column>
            </el-table>

            <br/><br/>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="date"
                label="唛头"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="件数（CTN）"
                width="180">
              </el-table-column>
              <el-table-column
                prop="件数（CTN）"
                label="重量（KG）">
              </el-table-column>
              <el-table-column
                prop="重量（KG）"
                label="地址信息">
              </el-table-column>
              <el-table-column
                prop="FBA标签"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small">派送地址</el-button>
                  <el-button type="text" size="small">删除</el-button>
                  <el-button type="text" size="small">添加</el-button>
                </template>
              </el-table-column>
            </el-table>

          </div>

          <div class="fcl-box to-left">
            <h3>发票及装箱单</h3>
            <div>
              <el-button size="mini" type="success" plain>上传发票</el-button>
              <el-button size="mini" type="success" plain>导入产品</el-button>
              <el-button size="mini" type="success" plain>下载产品导入模板</el-button>
            </div>
            <br/>
            <el-table
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column
                prop="date"
                label="中文品名">
              </el-table-column>
              <el-table-column
                prop="name"
                label="英文品名">
              </el-table-column>
              <el-table-column
                prop="件数（CTN）"
                label="海关编码">
              </el-table-column>
              <el-table-column
                prop="重量（KG）"
                width="100px"
                label="税率（%）">
              </el-table-column>
              <el-table-column
                prop="体积（CBM）"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="FBA标签"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="单价">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="总价">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                width="100px"
                label="箱数(CTNS)">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="净重">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                width="100px"
                label="毛重(KGS)">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                width="100px"
                label="体积(CMB)">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="材质">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="用途">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="制造商">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="备注">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="操作">
              </el-table-column>
              <el-table-column
                prop="地址信息"
                label="混装编码">
              </el-table-column>
            </el-table>
          </div>

          <div class="fcl-box to-right">
            <h3>产品声明</h3>
            <el-form-item label="是否带电池">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
              <el-button size="mini" type="success" plain>上传电池文件</el-button>
            </el-form-item>
            <el-form-item label="是否易碎品">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
              <el-button size="mini" type="success" plain>上传碎品保函</el-button>
            </el-form-item>
            <el-form-item label="是否带商标">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
              <span>提示：带R标、TM标</span>
            </el-form-item>
            <el-form-item label="是否带认证">
              <el-radio label="是"></el-radio>
              <el-radio label="否"></el-radio>
              <span>提示：蓝牙</span>
            </el-form-item>
          </div>

          <div class="fcl-box center to-left">
            <el-button type="success" style="width: 400px;">提交订单</el-button>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
  import headCommod from '../components/Head'
  import {
   getAction,putAction,httpAction,deleteAction,postAction
  } from "../http/request";
  import {getallcountries, getcityList, getcurlist, getstateList} from "../api/order";
  import {emailPattern,mobilePattern} from "../utils/pattern";

  export default {
    name: 'fcl',
    data() {

      return {
        //拖车信息
        trailer:{},
        fileList:[],
        //被保人
        insurance:{},
        insuranceVisible:false,
        insuranceBtnDisable:false,
        insurancelist:[],
        //发货人
        shipperList: [],
        shipperVisible:false,
        formLabelWidth:'100px',
        shipperBtnDisable:false,
        shipper:{},
        //进口商
        //购买来源：1.大森林 2.自购
        sourcelist:[
          {value:'1',label:'大森林'},
          {value:'2',label:'自购'},
        ],
        //性质：1.个人 2.企业
        naturelist:[
          {value:'1',label:'个人'},
          {value:'2',label:'企业'},
        ],
        importerlist:[],
        importerVisible:false,
        importer:{},
        importerDisable:false,
        //通知方
        notifylist:[],
        notifyVisible:false,
        notify:{},
        notifyDisable:false,
        //收货人
        receiverVisible:false,
        receiverlist:[],
        receiver:{},
        receiverDisabled:false,
        queryForm:{},
        //业务员数据
        salesmanlist: [],
        //添加人数据
        userlist:[],
        //国家基础数据
        countrylist:[],
        //省基础数据
        statelist:[],
        //市基础数据
        citylist:[],
        //币种基础数据
        curlist:[],
        options:[],
        nameList:[],
        emailList:[],
        //港口基础数据
        bdPortList:[],
        //费用类别基础数据
        feeTypeList:[],
        form: {
          bussinessList:[],

          tableData: [],
          osOrderFileList:[]
        },
        // 1普船海卡 3铁运
        // 4海加快（美森/以星特快）5APL快船
        // 6 海+快（盐田特快）7玩具专线海卡 8LA卡派 9义乌美森 10 金钻一号 11TEST 12王牌产品 13拆柜卡送 14海外中转仓暂存+派送 15飞船LA卡派 16中欧卡航 17玩具专线海快 18 露易丝跨境
        transportlist: [
          {value: '1', label: '普船海卡'},
          {value: '4', label: '海加快（美森/以星特快）'},
          {value: '3', label: '铁运'},
          {value: '15', label: '飞船LA卡派'},
          {value: '14', label: '海外中转仓暂存'},
          {value: '7', label: '玩具专线海卡'},
          {value: '7', label: '玩具专线海卡'},
          {value: '18', label: '露易丝跨境'},
          {value: '16', label: '中欧卡航'},
        ],
        url: {
          //查询发货人集合
          getShipperList: '/customer/shipper/getList',
          //新增发货人
          addCusShipper: '/customer/shipper/add',
          //查询收货放集合
          getReceiverList:'/customer/receive/getList',
          //新增收货方
          addCusReceiver:'/customer/receive/add',
          addNotify:'/customer/notice/add',
          getNotifyList:'/customer/notice/getList',
          //进口商
          addImporter:'/customer/importer/add',
          getImporterList:'/customer/importer/getList',
          upload:'/sys/oss/file/upload',
          addInsurance:'/customer/insurance/add',
          getInsuranceList:'/customer/insurance/getList',
          maidan:'/order/os/maidanExcel',
          tuishui:'/order/os/tuishuiExcel',
        },
        //是否显示派送方式
        paisongVisible: false,
        //发货人集合

        //校验
        shipperRules:{
          name:[
            { required : true, message:'请输入名称',trigger:'blur'},
            { max : 50, message:'长度不能超过50',trigger:'change'},
          ],
          contact:[
            { required : true, message:'请输入联系人',trigger:'blur'},
            { max : 50, message:'联系人长度不能超过50',trigger:'change'},
          ],
          tel:[
            { required : true, message:'请输入电话',trigger:'blur'},
            { pattern : mobilePattern, message:'手机号格式有误',trigger:'change'},
          ],
          email:[
            { pattern : emailPattern, message:'邮箱格式有误',trigger:'change'},
          ],
          country:[
            { required : true, message:'请选择国家',trigger:'change'},
          ],
          state:[
            {required:true,message:'请选择省/州',trigger:'change'},
          ],
          city:[
            {required:true,message:'请选择城市',trigger:'change'},
          ],
          address:[
            {required:true,message:'请输入地址',trigger:'blur'},
            {max:250,message:'长度不能超过250',trigger:'change'},
          ],
        },
        receiverRules:{
          name:[
            { required : true, message:'请输入名称',trigger:'blur'},
            { max : 50, message:'长度不能超过50',trigger:'change'},
          ],
          contact:[
            { required : true, message:'请输入联系人',trigger:'blur'},
            { max : 50, message:'联系人长度不能超过50',trigger:'change'},
          ],
          tel:[
            { required : true, message:'请输入电话',trigger:'blur'},
            { pattern : mobilePattern, message:'手机号格式有误',trigger:'change'},
          ],
          email:[
            { pattern : emailPattern, message:'邮箱格式有误',trigger:'change'},
          ],
          country:[
            { required : true, message:'请选择国家',trigger:'change'},
          ],
          state:[
            {required:true,message:'请选择省/州',trigger:'change'},
          ],
          city:[
            {required:true,message:'请选择城市',trigger:'change'},
          ],
          address:[
            {required:true,message:'请输入地址',trigger:'blur'},
            {max:250,message:'长度不能超过250',trigger:'change'},
          ],
        },
        notifyRules:{
          name :[
            { required : true, message: '请输入名字', trigger:'blur'},
            { max: 50, message: '长度不能超过50', trigger: 'change' },
          ],
          country:[
            { required : true, message:'请选择国家',trigger:'change'},

          ],
          state:[
            {required:true,message:'请选择省/州',trigger:'change'},

          ],
          city:[
            {required:true,message:'请选择城市',trigger:'change'},

          ],
          address:[
            {required:true,message:'请输入地址',trigger:'blur'},
            {max:250,message:'长度不能超过250',trigger:'change'},

          ],
          tel:[
            {required:true,message:'请输入手机号',trigger:'blur'},
            {pattern:mobilePattern,message:'请输入正确的手机号',trigger:'change'}
          ],
          email :[
            {required : true,message: '请输入邮箱',trigger:'blur'},
            { pattern: emailPattern, message: '请输入正确的邮箱', trigger: 'change' }
          ],
        },
        //表单校验
        importerRules:{
          name :[
            {required : true,message: '请输入进口商名称',trigger:'blur'},
            { max: 50, message: '长度不能超过50', trigger: 'change' },
          ],
          country:[
            {required:true,message:'请选择国家',trigger:'blur'},

          ],
          tax:[
            {required:true,message:'请输入税号',trigger:'blur'},

          ],
          tel:[
            {required:true,message:'请输入手机号',trigger:'blur'},
            {pattern:mobilePattern,message:'请输入正确的手机号',trigger:'change'}
          ],
          stime :[
            {required : true,message: '请输入有效开始时间',trigger:'blur'},

          ],
          etime :[
            {required : true,message: '请输入有效结束时间',trigger:'blur'},

          ],
          source :[
            {required : true,message: '请选择购买来源',trigger:'blur'},

          ],
          nature :[
            {required : true,message: '请选择性质',trigger:'blur'},

          ],
        },
        insuranceRules:{
          name :[
            { required : true, message: '请输入被保人', trigger:'blur'},
            { max: 50, message: '长度不能超过50', trigger: 'change' },
          ],
          type:[
            { required : true, message:'请选择类型',trigger:'change'},

          ],
          cardNo:[
            { required : true, message:'请输入身份证号',trigger:'change'},
            { max : 50, message:'长度不能超过50',trigger:'change'},

          ],

        },

      }
    },
    methods: {
      getShipType (num) {
        let string = ''
        this.transportlist.map(item => {
          if (item.value == num) {
            string = item.label
          }
        })
        return string
      },
      getBusType (arr) {
        let list = []
        arr.map(item => {
          if (item == 0) {
            list.push('订舱')
          } else if (item == 1) {
            list.push('拖车')
          } else if (item == 2) {
            list.push('报关')
          } else if (item == 3) {
            list.push('清关')
          } else if (item == 4) {
            list.push('派送到门')
          }
        })
        return list
      },
      getSendType (num) {
        if (num == 0) return '快递派送'
        if (num == 1) return '上车派送'
        if (num == 2) return '仓储'
        if (num == 3) return '自提'
      },
      tableRowClassName () {},
      //买单模板下载
      maidan(){
        this.downloadModel(this.url.maidan,'买单模板')
      },
      //退税模板下载
      tuishui(){
        this.downloadModel(this.url.tuishui,'退税模板')
      },
      //模板下载方法
      downloadModel(url,fileName){
        postAction(url,{},{responseType:'blob'})
        .then(response=>{
          if(!response){
            return
          }
          const blob = new Blob([response]);
          if(window.navigator && window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob,fileName)
          } else {
            let u = window.URL.createObjectURL(response)
            let aLink = document.createElement('a')
            aLink.style.display = 'none'
            aLink.href = u
            aLink.setAttribute('download',fileName + '.xlsx')
            document.body.appendChild(aLink)
            aLink.click()
            document.body.removeChild(aLink)
            window.URL.revokeObjectURL(u)
          }
        }).catch(err=>{
          this.$message.error(err.message);
        })
      },
      addInsurance(){
        //新增发货方，显示弹窗
        this.insurance = {};
        this.insuranceVisible = true;
        this.insuranceBtnDisable = false;
      },
      saveInsurance(){
        this.insuranceBtnDisable = true;
        let url = this.url.addInsurance;
        let method = "post";
        this.insurance.cusId = this.form.cusId;
        this.$refs['insurance'].validate((valid)=>{
          if (valid){

            httpAction(url,method,this.insurance)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.insuranceVisible=false;
                  //重新获取进口商集合
                  this.initInsurance();
                }else{
                  this.insuranceBtnDisable = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.importerDisable = false;
            })
          }else {
            this.insuranceBtnDisable = false;
          }
        })
      },
      initInsurance() {
        this.insurancelist = [];
        //获取发货人列表
        getAction(`${this.url.getInsuranceList}?cusId=${this.form.cusId}`)
          .then(res => {
            if (res.success) {
              let list = res.result;
              for (var i = 0; i < list.length; i++) {
                let value = list[i].name;
                let label = list[i].name;
                this.insurancelist.push({value, label});
              }
            } else {
              this.$message.warning('获取被保人列表失败')
            }
          }).catch(err => {
          this.$message.error(err.message)
        })
      },



      //文件上传之前校验文件合法
      beforeUpload(file){
        //对文件大小进行限制
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M){
          this.$message.warning('文件大小不能超过10MB')
        }
        const isFile = file.name.indexOf('.')!==-1;
        if (!isFile){
          this.$message.warning('该文件名不合法')
        }
        return isLt2M && isFile;
      },
      //上传文件到oss
      handleUpload(data){
        console.log("上传文件",data);
        const formData = new FormData();
        formData.append("file",data.file);
        postAction(this.url.upload,formData).then(res=>{
          if (res.success){
            //上传成功,返回结果赋值给form对象的文件集合
            let {id,size,ext,fileName,url} = res.result;
            this.form.osOrderFileList.push({ossId:id,size,ext,name:fileName,url,type:'28'});
            console.log('上传的进口商文件',this.form.osOrderFileList);
            this.fileList.push(res.result);
          }
        })
      },
      //上传买单文件
      uploadMd(data){
        console.log("上传文件",data);
        const formData = new FormData();
        formData.append("file",data.file);
        postAction(this.url.upload,formData).then(res=>{
          if (res.success){
            //上传成功,返回结果赋值给form对象的文件集合
            let {id,size,ext,fileName,url} = res.result;
            this.form.osOrderFileList.push({ossId:id,size,ext,name:fileName,url,type:'0'});
            console.log('上传的进口商文件',this.form.osOrderFileList);
            this.fileList.push(res.result);
          }
        })
      },
      //上传退税文件
      uploadTs(data){
        console.log("上传文件",data);
        const formData = new FormData();
        formData.append("file",data.file);
        postAction(this.url.upload,formData).then(res=>{
          if (res.success){
            //上传成功,返回结果赋值给form对象的文件集合
            let {id,size,ext,fileName,url} = res.result;
            this.form.osOrderFileList.push({ossId:id,size,ext,name:fileName,url,type:'1'});
            console.log('上传的进口商文件',this.form.osOrderFileList);
            this.fileList.push(res.result);
          }
        })
      },

      addImporter(){
        //新增发货方，显示弹窗
        this.importer = {};
        this.importerVisible = true;
        this.importerDisable = false;
      },
      saveImporter(){
        this.importerDisable = true;
        let url = this.url.addImporter;
        let method = "post";
        this.importer.cusId = this.form.cusId;
        this.$refs['importer'].validate((valid)=>{
          if (valid){

            httpAction(url,method,this.importer)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.importerVisible=false;
                  //重新获取进口商集合
                  this.initImporter();
                }else{
                  this.importerDisable = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.importerDisable = false;
            })
          }else {
            this.importerDisable = false;
          }
        })
      },
      initImporter() {
        this.importerlist = [];
        //获取发货人列表
        getAction(`${this.url.getImporterList}?cusId=${this.form.cusId}`)
          .then(res => {
            if (res.success) {
              let list = res.result;
              for (var i = 0; i < list.length; i++) {
                let value = list[i].id;
                let label = list[i].name;
                this.importerlist.push({value, label});
              }
            } else {
              this.$message.warning('获取进口商列表失败')
            }
          }).catch(err => {
          this.$message.error(err.message)
        })
      },
      addNotify(){
        //新增发货方，显示弹窗
        this.notify = {};
        this.notifyVisible = true;
        this.notifyDisable = false;
      },
      saveNotify(){
        this.notifyDisable = true;
        let url = this.url.addNotify;
        let method = "post";
        this.notify.cusId = this.form.cusId;
        this.$refs['notify'].validate((valid)=>{
          if (valid){

            httpAction(url,method,this.notify)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.notifyVisible=false;
                  //重新获取收货人集合
                  this.initNotify();
                }else{
                  this.notifyDisable = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.notifyDisable = false;
            })
          }else {
            this.notifyDisable = false;
          }
        })
      },
      initNotify() {
        this.notifylist = [];
        //获取发货人列表
        getAction(`${this.url.getNotifyList}?cusId=${this.form.cusId}`)
          .then(res => {
            if (res.success) {
              let list = res.result;
              for (var i = 0; i < list.length; i++) {
                let value = list[i].name;
                let label = list[i].name;
                this.notifylist.push({value, label});
              }
            } else {
              this.$message.warning('获取通知方列表失败')
            }
          }).catch(err => {
          this.$message.error(err.message)
        })
      },
      addReceiver(){
        //新增发货方，显示弹窗
        this.receiver = {};
        this.receiverVisible = true;
        this.receiverDisabled = false;
      },
      saveReceiver(){
        this.receiverDisabled = true;
        let url = this.url.addCusReceiver;
        let method = "post";
        this.receiver.cusId = this.form.cusId;
        this.$refs['receiver'].validate((valid)=>{
          if (valid){

            httpAction(url,method,this.receiver)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.receiverVisible=false;
                  //重新获取收货人集合
                  this.initReceiver();
                }else{
                  this.receiverDisabled = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.receiverDisabled = false;
            })
          }else {
            this.receiverDisabled = false;
          }
        })
      },
      initReceiver() {
        this.receiverlist = [];
        //获取发货人列表
        getAction(`${this.url.getReceiverList}?cusId=${this.form.cusId}`)
          .then(res => {
            if (res.success) {
              let list = res.result;
              for (var i = 0; i < list.length; i++) {
                let value = list[i].id;
                let label = list[i].name;
                this.receiverlist.push({value, label});
              }
            } else {
              this.$message.warning('获取收货人列表失败')
            }
          }).catch(err => {
          this.$message.error(err.message)
        })
      },
      //选择业务类型动态控制派送方式显示
      getCheck(val) {
        console.log("选择的值", this.form.bussinessList)
        if (val.join(',').indexOf('4') !== -1) {
          //选择了派送道门 显示派送方式
          this.paisongVisible = true;
        } else {
          this.paisongVisible = false;
        }
        console.log("选择的val", val.join(','))
      },
      addShipper() {
        //新增发货人，显示一个弹窗
        this.shipper = {};
        this.shipperVisible = true;
        this.shipperBtnDisable = false;
      },
      initShipper() {
        this.shipperList = [];
        //获取发货人列表
        getAction(`${this.url.getShipperList}?cusId=${this.form.cusId}`)
          .then(res => {
            if (res.success) {
              let list = res.result;
              for (var i = 0; i < list.length; i++) {
                let value = list[i].id;
                let label = list[i].name;
                this.shipperList.push({value, label});
              }
            } else {
              this.$message.warning('获取发货人列表失败')
            }
          }).catch(err => {
          this.$message.error(err.message)
        })
      },
      saveShipper(){
        this.shipperBtnDisable = true;
        let url = this.url.addCusShipper;
        let method = "post";
        this.shipper.cusId = this.form.cusId;
        this.$refs['shipper'].validate((valid)=>{
          if (valid){

            httpAction(url,method,this.shipper)
              .then(res=>{
                if (res.success){
                  this.$message.success(res.message);
                  this.shipperVisible=false;
                  //重新获取发货人集合
                  this.initShipper();
                }else{
                  this.shipperBtnDisable = false;
                  this.$message.warning(res.message);
                }

              }).catch(err=>{
              this.$message.error(err.message);
              this.shipperBtnDisable = false;
            })
          }else {
            this.shipperBtnDisable = false;
          }
        })
      },
      //初始化国家基础数据
      initCountryList(){
        getallcountries().then(res=>{
          if (res.success){
            for (var i=0;i<res.result.length;i++){
              let obj = {};
              obj.value = res.result[i].cnName;
              obj.label = res.result[i].twoCode + "-" + res.result[i].cnName;
              this.countrylist.push(obj);
            }
          }
        })
      },
      //初始化省数据
      initStateList(val){
        this.statelist=[];
        this.citylist=[];
        if (val){
          getstateList({cnName:val})
            .then((res)=>{

              if (res.success){
                for (var i=0;i<res.result.records.length;i++){
                  let obj = {};
                  obj.value = res.result.records[i].cname;
                  obj.label = res.result.records[i].code + "-" + res.result.records[i].cname;
                  this.statelist.push(obj);
                }
              }
            })
        }else {
          this.form.city = '';
          this.form.state = '';
          this.form.bdState = '';
          this.form.bdCity = '';
        }

      },
      //初始化城市数据
      initCityList(val){
        this.citylist=[];
        if (val){
          getcityList({cname:val})
            .then((res)=>{
              if (res.success){
                for (var i=0;i<res.result.records.length;i++){
                  let obj = {};
                  obj.value = res.result.records[i].id;
                  obj.label = res.result.records[i].code + "-" + res.result.records[i].cname;
                  this.citylist.push(obj);
                }
              }
            })
        }else {

        }

      },
      //初始化币种
      initCurList(){
        getcurlist().then(res => {
          if (res.success) {
            for (var i = 0; i < res.result.length; i++) {
              var obj = {};
              obj.value = res.result[i].shortName;
              obj.label = res.result[i].name + "-" + res.result[i].shortName;
              this.curlist.push(obj);
            }
          }
        }).catch(err=>{
          this.$message.error(err.message);
        })
      },
    },
    mounted() {
    },
    created() {
      //页面一加载就获取客户id 暂时写死
      let user = localStorage.getItem('FOREST_USER');
      console.log("当前用户",user);
      if (user){
        user = JSON.parse(user);
        this.form.cusId = user.id ;
      }else {
        this.form.cusId =  '1391586843210301441';
      }
      console.log("当前用户id",this.form);
      this.initCountryList();


      //获取发货人集合
      this.initShipper();
      //获取收货人集合
      this.initReceiver();
      this.initNotify();
      this.initImporter();
      this.initInsurance();
      this.initCurList();
    },
    components: {
      headCommod
    }
  }
</script>

<style scoped>
</style>
